:root {
	--dark: #222;
	--bg-color: #323232;
	--text-color: #cdcdcd;
	--inactive-color: #777;
	--line-light: #444;
	--unabel-line-light: #383838;
	--border-radius: 0px;
	--unit: 26px;
  }


@font-face {
	font-family: 'iconfont';
	src: url('../../../../assets/icon-font/iconfont.woff2?t=1626854310823') format('woff2'),
	url('../../../../assets/icon-font/iconfont.woff?t=1626854310823') format('woff'),
	url('../../../../assets/icon-font/iconfont.ttf?t=1626854310823') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 12px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* margin-right: 5px; */
  }

  .icon-18 {
	font-size: 18px;
  }
  .icon-16 {
	font-size: 16px;
  }
  .icon-14 {
	font-size: 14px;
  }

html,body{
    width: 100%;
    font-size:12px;
}
li {
	list-style: none;
}
body{
    background: var(--bg-color);
    color: var(--text-color);
}

button{

    /* padding:5px 10px; */
	width: inherit;
	height: var(--unit);
	line-height: 12px;
    border-radius: var(--border-radius);
    border:1px solid var(--line-light);
    color:#cdcdcd;
    background: #323232;
	outline-style: none;
	}
	button:hover{
		background: #3e3e3e;
	}
	button:active{
		/* background: linear-gradient(#000, #333); */
		background: #1f1f1e;
	}
	.submit {
		height: 28px;
		margin: 5px 5px;
		width: calc(100% - 10px);
	}

div[contenteditable=false] {
	display: block;
	color: var(--inactive-color);
	background:var(--bg-color);
	border: 1px solid var(--unabel-line-light);
}

[contenteditable]{
	display: inline-block;
	width: 100%;
	height: var(--unit);
    border:1px solid #3e3e3e;
	border-radius: var(--border-radius);
    background:#2a2a2a;
    padding:3px 5px;
	padding-left: 1.8rem;
	}
	[contenteditable]:nth-last-child(1):first-child{
		padding-left: 5px;
	}
	
	[contenteditable]:focus{
		outline: none;
		outline-style: none ;
		border: 1px solid #888;
	}
	.place-show:after  {
		content: attr(placeholder);
		position: absolute;
		top: 4px;
		color: var(--inactive-color);
	}
	.tabs input {
		outline-style: none ;
		width: inherit;
		height: 26px;
		line-height: var(--unit);
		padding: 5px;
		border:1px solid #3e3e3e;
		background:#2a2a2a;
	}
	/* div[contenteditable]:empty:before{
		content: attr(placeholder);
		color: #CCCCCC;
	}
	div[contenteditable]:focus{
		content:none;
	} */

ol > li {
	position: relative;
	}
li > label {
	position: absolute;
	left: .5rem;
	top: 3px;
	color: var(--inactive-color);
	}
	li > label > i{
		margin-right: .5rem;
	}
	


/* ========= tab组 =========*/
.tabs{ position:relative; background: var(--dark); clear: both;}
	nav {position: relative; z-index: 100;}
	nav a{
		float: left;
		background:none;
		color: var(--inactive-color);
		line-height:20px;
		display:block;
		text-decoration:none;
		padding:0px 10px;
		border-bottom: 1px solid var(--line-light);
		background: var(--dark);
		/* margin-right:1px;	 */

	}
	nav a:hover{
		background: var(--line-light);
		border-bottom: 1px solid var(--line-light)
		}
	nav .active{
		background: var(--bg-color); 
		border-bottom: 1px solid var(--bg-color)
		}
	.tabs > section{
		clear:left;
		display: none;
		position:relative;
		width:100%;
		border-top: 1px solid var(--line-light);
		padding:10px 5px;
		top:-1px;
		background: var(--bg-color);
		}
		.tabs > section .title{
			color: var(--inactive-color);
			}
	.tabs > section:target{z-index:2;}
	.tabs > section div {
		width: 100%;
	}
	.tabs > section .active{
		background: #1f1f1e;
		border:1px solid #1f1f1e;
	}

	

.check-button {
	height: var(--unit);
    padding: 5px;
    overflow: hidden;
    border-radius: var(--border-radius);
    display: flex;
    float: left;
    /* justify-content: center; */
    align-items: center;
    border:1px solid var(--line-light);

	}	
.check-button:nth-last-child(1):first-child{
	justify-content: center;
	
}
.check-button:hover {
	cursor: pointer;
	background: #3e3e3e;
    border:1px solid #525252;
}
.check-button:active{
    background: #1f1f1e;
    border:1px solid #525252;
  }
  .check-button i {
	/* color: var(--inactive-color) */
	}
  .check-button span {
	  margin-left: 5px;
  }

.tabs select {
	appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
	position: relative;
	display: inline-block;
	width: 100%;
	padding-left: 5px;
	height: var(--unit);
	/* line-height: var(--unit); */
	background-color: inherit;
	font: 12px/24px "Microsoft YaHei";
    border:1px solid var(--line-light);
	border-radius: 0 !important;
	outline: 0px !important;
	background: url() no-repeat right/ 20px;

	}
	.tabs option{
		
		background-color: var(--bg-color);
	}